<template>
  <div class=""></div>
</template>

<script setup lang="ts">
  import { onMounted } from 'vue'

  // 防抖
  function debounceFun(fn: Function, wait: number, immediate = false) {
    let timer: null | undefined = null
    return function (this: any, ...arges: any[]) {
      const context = this
      const callNow = immediate && !timer
      if (timer) clearTimeout(timer)
      timer = window.setTimeout(() => {
        timer = null
        if (!immediate) {
          fn.apply(context, arges)
        }
      }, wait)
      if (callNow) {
        fn.apply(context, arges)
      }
    }
  }
  // 节流
  function throttle(fn: Function, wait: number) {
    let timer: null | undefined = null
    return function (this: any, ...args: any[]) {
      const context = this
      if (!timer) {
        timer = window.setTimeout(() => {
          timer = null
          fn.apply(context, args)
        }, wait)
      }
    }
  }

  function testDebounce(): void {
    console.log('防抖')
  }
  onMounted(() => {
    window.onresize = debounceFun(() => {
      testDebounce()
    }, 1000)
  })
</script>

<style lang="less" scoped>
  .add {
    margin: 0px;
  }
</style>
